<template>
  <div class="person">
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>
<script lang="ts" setup name="person">
import { onMounted,onBeforeMount,onUpdated,onBeforeUpdate,onUnmounted, onBeforeUnmount, ref } from "vue";

let sum = ref(0)
function changeSum(){
  sum.value += 1
}


// 创建
// 在setup语法糖里 没有Created和beforeCreated钩子函数了
console.log('01、我创建了');
// 挂载前
// 在挂载前Vue3会帮我们调用onBeforeMount所指定的那个函数，并不是说Vue3在挂载前会调用onBeforeMount函数
onBeforeMount(()=>{
  console.log('02、挂载前');
})
// 挂载完毕后
// 在挂载前Vue3会帮我们调用onMounted所指定的那个函数，并不是说Vue3在挂载前会调用onMounted函数
onMounted(()=>{
  console.log('03、挂载完毕');
})
// 更新前
// 在挂载前Vue3会帮我们调用onBeforeUpdate所指定的那个函数，并不是说Vue3在挂载前会调用onBeforeUpdate函数
onBeforeUpdate(()=>{
  console.log('04、更新前');
})
// 更新完毕后
// 在挂载前Vue3会帮我们调用onUpdate所指定的那个函数，并不是说Vue3在挂载前会调用onUpdate函数
onUpdated(()=>{
  console.log('05、更新后');
  
})
// 卸载前
// 在挂载前Vue3会帮我们调用onBeforeUnmount所指定的那个函数，并不是说Vue3在挂载前会调用onBeforeUnmount函数
onBeforeUnmount(()=>{
  console.log('06、卸载前');
})

// 卸载完毕后
onUnmounted(()=>{
  console.log('07、卸载完毕');
})

</script>
<style>
button {
  margin-left: 10px;
}
</style>